<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>历史画师 - 海报生成器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "SimSun", "STSong", serif;
            background-color: #f5f1e6;
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23d2c7b5' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .container {
            text-align: center;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.85);
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            border: 1px solid #d4c2a3;
        }
        h1 {
            color: #8b4513;
            font-size: 2.2rem;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 2px solid #d4c2a3;
            background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5' fill='%238b4513' fill-opacity='0.6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center bottom;
            background-size: 40px 20px;
        }
        .input-section {
            margin: 30px 0 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
        }
        #themeInput {
            padding: 12px 15px;
            width: 350px;
            font-size: 16px;
            border: 2px solid #d4c2a3;
            border-radius: 4px;
            background-color: #f9f6f0;
            font-family: inherit;
            transition: all 0.3s;
        }
        #themeInput:focus {
            outline: none;
            border-color: #8b4513;
            box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.1);
        }
        #generateBtn {
            padding: 12px 25px;
            font-size: 16px;
            background-color: #8b4513;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
            font-family: inherit;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        #generateBtn::before {
            content: "✦";
        }
        #generateBtn:hover {
            background-color: #6d3811;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .posters {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 20px;
        }
        .poster-container {
            width: 380px;
            height: 480px;
            border: 12px solid transparent;
            border-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h100v100H0z' fill='none'/%3E%3Cpath d='M20 20h60v60H20z' fill='none' stroke='%238b4513' stroke-width='4' stroke-dasharray='5,5'/%3E%3C/svg%3E") 30 stretch;
            background-color: white;
            box-shadow: 0 8px 15px rgba(0,0,0,0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
        .poster-container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 30px;
            background: linear-gradient(to bottom, rgba(139, 69, 19, 0.1), transparent);
        }
        .poster-container::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 30px;
            background: linear-gradient(to top, rgba(139, 69, 19, 0.1), transparent);
        }
        .poster-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.5s;
        }
        .poster-container img:hover {
            transform: scale(1.03);
        }
        .loading {
            color: #6d3811;
            font-style: italic;
            font-size: 18px;
            padding: 20px;
            text-align: center;
        }
        .error {
            color: #a52a2a;
            margin-top: 10px;
            font-size: 16px;
        }
        .historical-decoration {
            position: absolute;
            width: 40px;
            height: 40px;
            pointer-events: none;
        }
        .deco-top-left {
            top: -20px;
            left: -20px;
            background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l20 20-20 20z' fill='%23d4c2a3'/%3E%3C/svg%3E");
        }
        .deco-top-right {
            top: -20px;
            right: -20px;
            background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 0l-20 20 20 20z' fill='%23d4c2a3'/%3E%3C/svg%3E");
        }
        .deco-bottom-left {
            bottom: -20px;
            left: -20px;
            background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40l20-20-20-20z' fill='%23d4c2a3'/%3E%3C/svg%3E");
        }
        .deco-bottom-right {
            bottom: -20px;
            right: -20px;
            background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 40l-20-20 20-20z' fill='%23d4c2a3'/%3E%3C/svg%3E");
        }
        /* 原图查看模态框 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        .modal-content {
            max-width: 90%;
            max-height: 90%;
            position: relative;
        }
        .modal img {
            max-width: 100%;
            max-height: 90vh;
            border: 5px solid white;
        }
        .close-modal {
            position: absolute;
            top: -40px;
            right: 0;
            color: white;
            font-size: 30px;
            cursor: pointer;
            background: none;
            border: none;
        }
        @media (max-width: 900px) {
            .posters {
                flex-direction: column;
                align-items: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>历史画师 - 海报生成器</h1>
        <div class="input-section">
            <input type="text" id="themeInput" placeholder="请输入海报主题（例如：古风山水、唐代仕女）...">
            <button id="generateBtn">生成海报</button>
        </div>
        <div id="error" class="error"></div>

        <div class="posters">
            <div class="poster-container" id="poster1" onclick="openModal(this)">
                <div class="historical-decoration deco-top-left"></div>
                <div class="historical-decoration deco-top-right"></div>
                <div class="historical-decoration deco-bottom-left"></div>
                <div class="historical-decoration deco-bottom-right"></div>
                <span class="loading">等待生成海报...</span>
            </div>
            <div class="poster-container" id="poster2" onclick="openModal(this)">
                <div class="historical-decoration deco-top-left"></div>
                <div class="historical-decoration deco-top-right"></div>
                <div class="historical-decoration deco-bottom-left"></div>
                <div class="historical-decoration deco-bottom-right"></div>
                <span class="loading">等待生成海报...</span>
            </div>
        </div>
    </div>

    <!-- 原图查看模态框 -->
    <div id="imageModal" class="modal">
        <div class="modal-content">
            <button class="close-modal" onclick="closeModal()">&times;</button>
            <img id="modalImage" src="" alt="原图">
        </div>
    </div>

    <script>
        document.getElementById('generateBtn').addEventListener('click', generatePosters);
        let currentImageUrl = '';

        function openModal(element) {
            const img = element.querySelector('img');
            if (img && img.src) {
                currentImageUrl = img.src;
                document.getElementById('modalImage').src = currentImageUrl;
                document.getElementById('imageModal').style.display = 'flex';
            }
        }

        function closeModal() {
            document.getElementById('imageModal').style.display = 'none';
            currentImageUrl = '';
        }

        // 点击模态框背景关闭
        document.getElementById('imageModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeModal();
            }
        });

        function isValidUrl(url) {
            try {
                new URL(url);
                return true;
            } catch (e) {
                return false;
            }
        }

        async function generatePosters() {
            const themeInput = document.getElementById('themeInput');
            const poster1 = document.getElementById('poster1');
            const poster2 = document.getElementById('poster2');
            const errorElement = document.getElementById('error');
            const theme = themeInput.value.trim();

            if (!theme) {
                errorElement.textContent = '请输入海报主题';
                return;
            }

            errorElement.textContent = '';

            poster1.innerHTML = `
                <div class="historical-decoration deco-top-left"></div>
                <div class="historical-decoration deco-top-right"></div>
                <div class="historical-decoration deco-bottom-left"></div>
                <div class="historical-decoration deco-bottom-right"></div>
                <span class="loading">生成中...</span>
            `;
            poster2.innerHTML = `
                <div class="historical-decoration deco-top-left"></div>
                <div class="historical-decoration deco-top-right"></div>
                <div class="historical-decoration deco-bottom-left"></div>
                <div class="historical-decoration deco-bottom-right"></div>
                <span class="loading">生成中...</span>
            `;

            try {
                const controller = new AbortController();
                const timeoutId = setTimeout(() => controller.abort(), 15000);

                const response = await fetch('/generate_images', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ input: theme }),
                    signal: controller.signal
                });

                clearTimeout(timeoutId);

                if (!response.ok) {
                    throw new Error(`网络响应不正常: ${response.status} ${response.statusText}`);
                }

                const data = await response.json();

                if (!Array.isArray(data.images)) {
                    throw new Error('后端返回数据格式错误: images不是数组');
                }

                // 显示海报1
                if (data.images.length >= 1) {
                    const imgUrl = data.images[0];
                    if (isValidUrl(imgUrl)) {
                        poster1.innerHTML = `
                            <div class="historical-decoration deco-top-left"></div>
                            <div class="historical-decoration deco-top-right"></div>
                            <div class="historical-decoration deco-bottom-left"></div>
                            <div class="historical-decoration deco-bottom-right"></div>
                            <img src="${imgUrl}" alt="海报1"
                                 onload="this.style.display='block'"
                                 onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22100%22 viewBox=%220 0 200 100%22%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 fill=%22%23a52a2a%22%3E图片加载失败%3C/text%3E%3C/svg%3E'; this.alt='图片加载失败'">
                        `;
                    } else {
                        poster1.innerHTML = `
                            <div class="historical-decoration deco-top-left"></div>
                            <div class="historical-decoration deco-top-right"></div>
                            <div class="historical-decoration deco-bottom-left"></div>
                            <div class="historical-decoration deco-bottom-right"></div>
                            <span class="error">海报1 URL无效</span>
                        `;
                    }
                } else {
                    poster1.innerHTML = `
                        <div class="historical-decoration deco-top-left"></div>
                        <div class="historical-decoration deco-top-right"></div>
                        <div class="historical-decoration deco-bottom-left"></div>
                        <div class="historical-decoration deco-bottom-right"></div>
                        <span class="error">未生成海报1</span>
                    `;
                }

                // 显示海报2
                if (data.images.length >= 2) {
                    const imgUrl = data.images[1];
                    if (isValidUrl(imgUrl)) {
                        poster2.innerHTML = `
                            <div class="historical-decoration deco-top-left"></div>
                            <div class="historical-decoration deco-top-right"></div>
                            <div class="historical-decoration deco-bottom-left"></div>
                            <div class="historical-decoration deco-bottom-right"></div>
                            <img src="${imgUrl}" alt="海报2"
                                 onload="this.style.display='block'"
                                 onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22100%22 viewBox=%220 0 200 100%22%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 fill=%22%23a52a2a%22%3E图片加载失败%3C/text%3E%3C/svg%3E'; this.alt='图片加载失败'">
                        `;
                    } else {
                        poster2.innerHTML = `
                            <div class="historical-decoration deco-top-left"></div>
                            <div class="historical-decoration deco-top-right"></div>
                            <div class="historical-decoration deco-bottom-left"></div>
                            <div class="historical-decoration deco-bottom-right"></div>
                            <span class="error">海报2 URL无效</span>
                        `;
                    }
                } else {
                    poster2.innerHTML = `
                        <div class="historical-decoration deco-top-left"></div>
                        <div class="historical-decoration deco-top-right"></div>
                        <div class="historical-decoration deco-bottom-left"></div>
                        <div class="historical-decoration deco-bottom-right"></div>
                        <span class="error">未生成海报2</span>
                    `;
                }

            } catch (error) {
                console.error('生成海报失败:', error);
                errorElement.textContent = `生成海报失败: ${error.message}`;

                poster1.innerHTML = `
                    <div class="historical-decoration deco-top-left"></div>
                    <div class="historical-decoration deco-top-right"></div>
                    <div class="historical-decoration deco-bottom-left"></div>
                    <div class="historical-decoration deco-bottom-right"></div>
                    <span class="error">生成失败</span>
                `;
                poster2.innerHTML = `
                    <div class="historical-decoration deco-top-left"></div>
                    <div class="historical-decoration deco-top-right"></div>
                    <div class="historical-decoration deco-bottom-left"></div>
                    <div class="historical-decoration deco-bottom-right"></div>
                    <span class="error">生成失败</span>
                `;
            }
        }
    </script>
</body>
</html>